import styled from "styled-components";
import { HTMLAttributes } from "react";
import { DownOutlined } from "@ant-design/icons";
import { clsx } from "clsx";

const Wrapper = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .load-more-button {
    padding: 4px 10px;
    background: black;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
    transition: 200ms;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }
`;

interface Props extends HTMLAttributes<HTMLDivElement> {
  loading?: boolean;
  hasMore?: boolean;
  onLoad?: () => void;
}

export function LoadMoreButton(props: Props) {
  const { className, hasMore, loading, ...restProps } = props;
  return (
    <Wrapper
      className={clsx(`load-more-button__wrapper`, {
        [`${className}__wrapper`]: className,
      })}
    >
      <div className={clsx("load-more-button", className)} {...restProps}>
        {hasMore ? (
          loading ? (
            "加载中..."
          ) : (
            <>
              <DownOutlined style={{ marginRight: 4 }} /> 加载更早的评论
            </>
          )
        ) : (
          "-- 没有了 --"
        )}
        {}
      </div>
    </Wrapper>
  );
}
